<template>
  <h1>{{ value1 }}</h1>
  <h2>{{ value2 }}</h2>
  <h2>{{ value3 }}</h2>
</template>

<script lang="ts">
export default {
  name: "TestRequest",
};
</script>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
const value1 = ref("value1");
const value2 = ref("value2");
const value3 = ref("value3");

const getData = () => {
  fetch("/api/values")
    .then((response) => response.json())
    .then(
      (jsonResponse) => {
        console.log(jsonResponse);
        value1.value = jsonResponse;
      },
      (error) => {
        value1.value = error;
      }
    )
    .catch(() => {
      console.log("error");
    });
};

const getData2 = async () => {
  let data = {
    value: "food",
    pageSize: 4,
    pageNum: 1,
  };
  const source = await fetch("/api/values", {
    body: JSON.stringify(data),
    headers: {
      "content-type": "application/json",
    },
    method: "POST",
  });
  const jsonResponse2 = await source.json();
  console.log(JSON.stringify(jsonResponse2));
  value2.value = JSON.stringify(jsonResponse2);
};

const getData3 = () => {
  axios
    .get("/api/values")
    .then((response) => {
      value3.value = response.data.a;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  getData();
  getData2();
  getData3();
});
</script>

<style scoped></style>
